---
type: tutorial
title: Créez votre premier projet Astro
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Créez un nouveau projet pour le tutoriel Astro et préparez-vous à coder
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Exécutez l'assistant de configuration `create astro` pour créer un nouveau projet Astro
  - Démarrez le serveur Astro en mode développement (dev)
  - Visualisez un aperçu en direct de votre site web dans votre navigateur
</PreCheck>

## Lancez l'assistant de configuration Astro

La méthode préférée pour créer un nouveau site Astro est d'utiliser notre assistant de configuration `create astro`.

<Steps>
1. Dans la ligne de commande de votre terminal, exécutez la commande suivante en utilisant votre gestionnaire de paquets préféré :

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # créez un nouveau projet avec npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # créez un nouveau projet avec pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # créez un nouveau projet avec yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Confirmez avec `y` pour installer `create-astro`.
3. À la question, "Where would you like to create your new project?" ("Où souhaitez-vous créer votre nouveau projet ?") saisissez le nom d'un dossier pour créer un nouveau répertoire pour votre projet, 
  par exemple `./tutoriel`.

    :::note
    Un nouveau projet Astro ne peut être créé que dans un dossier complètement vide, alors choisissez un nom pour votre dossier qui n'existe pas encore !
    :::

4. Vous verrez une courte liste de modèles de départ que vous pourrez choisir. Utilisez les touches fléchées (haut et bas) pour naviguer jusqu'au modèle “Empty” (Vide), puis appuyez sur la touche Entrée pour valider votre choix.

5. Lorsque l'invite vous demande si vous prévoyez d'utiliser TypeScript, tapez `n`.

6. À la question, "Would you like to install dependencies?" ("Souhaitez-vous installer des dépendances ?") tapez`y`.

7. Lorsque l'invite demande, "Would you like to initialize a new git repository?" ("Souhaitez-vous initialiser un nouveau dépôt git ?",) tapez `y`.
</Steps>

Une fois l'assistant d'installation terminé, vous n'avez plus besoin de ce terminal. Vous pouvez maintenant ouvrir VS Code pour continuer.

## Ouvrez votre projet dans VS Code

<Steps>
8. Ouvrez VS Code. Vous serez invité à ouvrir un dossier. Choisissez le dossier que vous avez créé lors de l'assistant de configuration.

9. Si c'est la première fois que vous ouvrez un projet Astro, vous devriez voir une notification vous demandant si vous souhaitez installer des extensions recommandées. Cliquez pour voir les extensions recommandées, et choisissez l'extension [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Cela fournira une coloration syntaxique et des complétions automatiques pour votre code Astro.

10. Assurez-vous que le terminal est visible et que vous pouvez voir l'invite de commande, comme ceci :

    ```sh
    utilisateur@machine:~/tutoriel$
    ```

    :::tip[Raccourci Clavier]
    Pour modifier la visibilité du terminal, utilisez <kbd>Ctrl + J</kbd> (macOS : <kbd>Cmd ⌘ + J</kbd>).
    :::
</Steps>

Vous pouvez maintenant utiliser le terminal intégré à cette fenêtre, plutôt que l'application Terminal de votre ordinateur, pour le reste de ce tutoriel.



## Exécutez Astro en mode dev

Pour prévisualiser vos fichiers de projet _comme un site web_ pendant que vous travaillez, vous devez exécuter Astro en mode développement (dev).

### Démarrez le serveur de dev

<Steps>
11. Exécutez la commande pour démarrer le serveur dev d'Astro en tapant dans le terminal de VS Code :

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    Vous devriez maintenant voir une confirmation dans le terminal indiquant qu'Astro fonctionne en mode dev. 🚀
</Steps>

## Visualisez un aperçu de votre site web

Vos fichiers de projet contiennent tout le code nécessaire pour afficher un site web Astro, mais c'est le navigateur qui est responsable de l'affichage de votre code sous forme de pages web.

<Steps>
12. Cliquez sur le lien `localhost` dans la fenêtre du terminal pour voir un aperçu en direct de votre nouveau site web Astro !

    (Astro utilise `http://localhost:4321` par défaut si le port `4321` est disponible.)

    Voici à quoi devrait ressembler le site web de départ "Empty Project" d'Astro dans l'aperçu du navigateur :

    ![Une page blanche avec le mot Astro en haut.](/tutorial/minimal.png)
  
</Steps>

:::tip[Utilisation du serveur de développement Astro]

Tant que le serveur Astro fonctionne en mode dev, vous NE pourrez PAS exécuter de commandes dans la fenêtre du terminal. À la place, cette fenêtre vous donnera des commentaires pendant que vous prévisualisez votre site.

Vous pouvez arrêter le serveur dev à tout moment et revenir à l'invite de commande en tapant <kbd>Ctrl + C</kbd> dans le terminal.

Parfois, le serveur dev s'arrêtera de lui-même pendant que vous travaillez. Si votre aperçu en direct cesse de fonctionner, retournez dans le terminal et redémarrez le serveur dev en tapant `npm run dev`.
:::

<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux créer un nouveau projet Astro.
- [ ] Je peux démarrer le serveur dev Astro.
</Checklist>
</Box>

### Ressources

- <p>[Démarrer avec Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge>externe</Badge> — un tutoriel vidéo pour l'installation, la configuration et le travail avec VS Code</p>
